<template>
  <div>
    <ul>
      <!-- v-for -->
      <li v-for="(item,index) in items" :key="item.message">
        {{item.message}} - {{index}} - {{parentMsg}}
      </li>
      <!-- 解构 -->
      <li v-for="({message},index) in items" :key="message">
        {{message}} - {{index}} - {{parentMsg}}
      </li>
      <!-- of 替代 in -->
      <li v-for="({message},index) of items" :key="message">
        {{message}} - {{index}} - {{parentMsg}}
      </li>
    </ul>
    <hr />
    <ul>
      <li v-for="(value,key,index) in myObject" :key="key">
        {{ value }} - {{key}} - {{index}}
      </li>
    </ul>

  </div>
</template>

<script setup>
import { ref, reactive } from "vue"

const parentMsg = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

// v-for 遍历对象。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

// Vue 能够侦听响应式数组的变更方法，这些方法会修改原数组
// push/pop/shift/unshift/splice/sort/reverse
// filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。
</script>